<template>
    <div style="flex:1;" v-if="show">
        <div class="search-input">
            <span v-text="title"></span>
            <el-input @keyup.native.enter="onEnter" v-model="property.value" size="medium" :placeholder="placeholder">
                <i class="el-icon-search el-input__icon"
                   slot="suffix"
                   @click="onClick">
                </i>
            </el-input>
        </div>
        <el-dialog class="dialog-content" border title="个人信息查询" @close='closeDialog' :visible.sync="dialogVisible"
                   width="70%" v-if="type.indexOf('PERSON') != '-1'">
            <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-bottom:20px;">
                <el-form-item colspan="16" :label="title">
                    <el-input style="width:300px" size="medium" v-model="form.aac147"
                              placeholder="请输入身份证号码查询"></el-input>
                </el-form-item>
                <el-form-item colspan="16" label="证件类型">
                    <el-select style="width:300px" v-model="form.aac058" placeholder="请选择">
                        <el-option v-for="item in list" :key="item.key" :label="item.value"
                                   :value="item.key"></el-option>
                    </el-select>
                    <!--<el-input size="medium" v-model="form.aac058" placeholder="输入类型"></el-input>-->
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table class="ep-table" :data="tableData" style="width: 100%" height="250px" highlight-current-row
                      @row-click="tableClick" @row-dblclick="tableDbClick">
                <el-table-column v-for="(item,index) in tableList" :key="index" align="center" :prop="item.value"
                                 :label="item.name" :width="item.width || ''" min-width="80"
                                 :formatter="psTableFilter"></el-table-column>
            </el-table>
            <!-- <div style="margin-bottom:10px;">
                <el-pagination
                        @size-change="handleSizeChange" @current-change="handlePageChange" background
                        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80,100]"
                        :current-page="pager.page" :page-size="pager.size" :total="pager.total">
                </el-pagination>
            </div> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog class="dialog-content" border title="单位信息查询" @close='closeDialog' :visible.sync="dialogVisible"
                   width="70%" v-if="type.indexOf('COMPANY') != '-1'">
            <el-form :inline="true" :model="form1" class="demo-form-inline" style="margin-bottom:20px;">
                <el-form-item colspan="16" :label="title">
                    <el-input style="width:300px" v-model="form1.bab010" placeholder="请输入统一社会信用代码"></el-input>
                </el-form-item>
                <el-form-item colspan="16" label="行政区划">
                    <el-select style="width:300px" v-model="form1.aab301" placeholder="请选择">
                        <el-option v-for="item in list" :key="item.key" :label="item.value"
                                   :value="item.key"></el-option>
                    </el-select>
                    <!--<el-input  style="width:300px" v-model="form1.aab301" placeholder="请输入所属地区"></el-input>-->
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table class="ep-table" :data="tableData" style="width: 100%" height="220px" highlight-current-row
                      @row-click="tableClick" @row-dblclick="tableDbClick">
                <el-table-column v-for="(item,index) in tableList" :key="index" align="center" :prop="item.value"
                                 :label="item.name" :width="item.width || ''" min-width="80"
                                 :formatter="cpTableFilter"></el-table-column>
            </el-table>
            <!-- <div style="margin-bottom:10px;">
                <el-pagination
                        @size-change="handleSizeChange" @current-change="handlePageChange" background
                        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80,100]"
                        :current-page="pager.page" :page-size="pager.size" :total="pager.total">
                </el-pagination>
            </div> -->

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="es6">
    import {
        countryTypeFilter,
        countryFilter,
        sexTypeFilter,
        YYYYmmDD_Filter,
        nationTypeFilter,
        accountTypeFilter,
        regionTypeFilter,
        unitType,
        aab021Filter,
        businessTypeFilter,
        riskTypeFilter
    } from '@/utils/filters.js'

    export default {
        props: {
            title: {
                type: String,
                default: '请填写title属性'
            },
            placeholder: {
                type: String,
                default: ''
            },
            show: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: 'PERSON'
            },
            api: {
                type: String,
                default: ''
            },
            tableList: {
                type: Array,
                default: () => []
            },
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            datas: {
                type: Object,
                default: null
            },
            codetype: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                table: [],
                hidden: false,
                dialogVisible: false,
                tableData: [],
                id: {
                    randowId: ""
                },
                pager: {
                    page: 1,
                    size: 20,
                    total: 0,
                },
                form: {
                    aac147: '',
                    aac058: '01',
                },
                form1: {
                    bab010: '',
                    aab301: '339900',
                },
                list: []
            }
        },
        computed: {
            codeTypes() {
                console.log(this.$store.getters.codeTypes && this.$store.getters.codeTypes.id)
                let codeTypes = sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
                return codeTypes;
            }
        },
        watch: {
            property: {
                handler(value) {
                    this.setProperty();
                },
                deep: true
            },
            codeTypes: {
                handler(value) {
                    this.getList();
                },
                deep: true
            },
            codetype: {
                handler(value) {
                    this.getList();
                },
                deep: true
            }
        },
        created() {
            this.getList();
        },
        methods: {
            /**
             * 获取select
             */
            getList() {
                this.list = this.codeTypes && [this.codetype] || [];
                // if(JSON.stringify(this.codeTypes)!='{}' && this.codetype){
                //     this.list = this.codeTypes[this.codetype] || [];
                // }
            },

            // dialog关闭事件 清空tableData
            closeDialog() {
                this.tableData = [];
            },
            /**
             * 回选搜索框值
             */
            setProperty() {
                if (this.type.indexOf('PERSON') != '-1') {
                    this.form.aac147 = this.property.value;
                } else if (this.type.indexOf('COMPANY') != '-1') {
                    this.form1.bab010 = this.property.value;
                }
            },
            /**
             * 请求列表（回车）
             */
            onEnter() {
                this.getUserId(0);
            },
            /**
             * 点击弹框不请求
             */
            onClick() {
                if (this.property.value != "") {
                    this.dialogVisible = !this.dialogVisible;
                    this.getUserId(1);
                } else {
                    this.dialogVisible = !this.dialogVisible;
                }
            },

            /**
             * 表格点击事件
             */
            tableClick(row) {
                this.id.row = row;
                this.id.data = this.datas;
                this.id.randowId = Math.random();
            },
            /**
             * 表格双击事件
             */
            tableDbClick(row) {
                this.dialogVisible = false;
                this.id.row = row;
                this.id.data = this.datas;
                this.id.randowId = Math.random();
                if (this.type.indexOf('PERSON') != '-1') {
                    this.$store.dispatch('SET_PERSONID', this.id);
                } else if (this.type.indexOf('COMPANY') != '-1') {
                    this.$store.dispatch('SET_COMPANYID', this.id);
                }
            },
            /**
             * 提交id
             */
            submit() {
                if (this.id && (this.id.aac001 || this.id.aab001)) {
                    this.dialogVisible = false;
                    //改变状态
                    this.id.randowId = Math.random();
                    if (this.type.indexOf('PERSON') != '-1') {
                        this.$store.dispatch('SET_PERSONID', this.id);
                    } else if (this.type.indexOf('COMPANY') != '-1') {
                        this.$store.dispatch('SET_COMPANYID', this.id);
                    }
                }
            },
            /**
             * 查询
             */
            query() {
                this.getUserId(1);
            },
            /**
             * 根据身份证获取id
             */
            getUserId(type) {
                let params = {};
                if (this.type.indexOf('COMPANY') != '-1') {
                    this.form1.type = this.type;
                    params = {
                        searchData: this.form1,
                        ...this.pager
                    };
                } else if (this.type.indexOf('PERSON') != '-1') {
                    this.form.type = this.type;
                    params = {
                        searchData: this.form,
                        ...this.pager
                    };
                }
                this.$api.commonPost(this.api, params).then(res => {
                    console.log(res)
                    if (res.status === '0') {
                        if (type) {
                            if (this.type.indexOf('PERSON') != '-1') {
                                this.property.value = this.form.aac147;
                            } else if (this.type.indexOf('COMPANY') != '-1') {
                                this.property.value = this.form1.bab010;
                            }
                            this.tableData = res.data;
                        } else {
                            if (res.data && res.data.length == 1) {
                                
                                this.id.row = res.data[0];
                                this.id.data = this.datas;
                                this.id.randowId = Math.random();
                                // console.log('this.id',this.id);
                                if (this.type.indexOf('PERSON') != '-1') {
                                    this.$store.dispatch('SET_PERSONID', this.id);
                                     
                                } else if (this.type.indexOf('COMPANY') != '-1') {
                                    // console.log(this.id)
                                    this.$store.dispatch('SET_COMPANYID', this.id);
                                     
                                }
                            } else if (res.data && res.data.length > 1) {
                                this.dialogVisible = true;
                                this.tableData = res.data;
                            }
                        }
                    } else if (res.successMessage && res.successMessage.length > 0) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            },
            /**
             * 个人统一过滤器
             */
            psTableFilter(row, column, cellValue, index) {
                if (row && column && row[column.property]) {
                    switch (column.property) {
                        case 'aac058':
                            return countryTypeFilter(row[column.property]);
                        case 'aac161':
                            return countryFilter(row[column.property]);
                        case 'aac004':
                            return sexTypeFilter(row[column.property]);
                        case 'aac006':
                            return YYYYmmDD_Filter(row[column.property]);
                        case 'aac005':
                            return nationTypeFilter(row[column.property]);
                        case 'aac009':
                            return accountTypeFilter(row[column.property]);
                        default:
                            return cellValue
                    }
                }
            },

            /**
             * 公司统一过滤器
             */
            cpTableFilter(row, column, cellValue, index) {
                if (row && column && row[column.property]) {
                    switch (column.property) {
                        case 'aab301':
                            return regionTypeFilter(row[column.property]);
                        case 'aab019':
                            return unitType(row[column.property]);
                        case 'aab021':
                            return aab021Filter(row[column.property]);
                        case 'aab022':
                            return businessTypeFilter(row[column.property]);
                        case 'aaa149':
                            return riskTypeFilter(row[column.property]);
                        default:
                            return cellValue
                    }
                }
            },

            /**
             * 页面码改变时事件
             */
            handlePageChange(page) {
                this.pager.page = page;
                this.getUserId(1);
            },
            /**
             * 每页条数改变事件
             */
            handleSizeChange(size) {
                this.pager.size = size;
                this.getUserId(1);
            },
        }
    }
</script>

<style lang="less" scoped>
    .search-content {
        display: flex;
        justify-content: space-between;
        .search-input {
            display: flex;
            flex: 1;
            margin-right: 30px;
            max-width: 500px;
            span {
                /*flex: 100px;*/
                display: inline-block;
                margin-right: 10px;
                line-height: 36px;
                /*overflow: hidden;*/
                /*text-overflow: ellipsis;*/
                white-space: nowrap;
                /*min-width:130px;*/
            }

            span:before {
                content: '*';
                color: #f56c6c;
                margin-right: 4px;
            }

            .el-icon-search {
                cursor: pointer;
            }

            .el-icon-search:hover {
                color: #409eff;
            }
        }
    }

    .ep-table {
        .ep-table-item {
            padding: 10px;
        }
    }

    .dialog-footer {
        width: calc(100% - 40px);
        /*position: absolute;*/
        bottom: 0;
        right: 0;
        padding: 0 20px 30px 20px;
    }

    .el-table__body tr.current-row > td {
        background-color: #cdebef !important;
    }

    /deep/ .el-dialog {
        /*height:70vh;*/
    }

    /deep/ .el-dialog__footer {
        padding: 0px;
    }

    /deep/ .el-table--enable-row-transition .el-table__body td {
        padding: 12px 0 !important;
    }
</style>
